<!--
 * @description: 二三维分屏同步显示
 * @Author: FengKongLi
 * @Date: 2022-09-13 10:08:55
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-09-13 11:28:26
-->
<template>
  <div class="container">
    <div id="view3D-box">
      <secen-view @already="init3D" id="view3D"></secen-view>
    </div>
    <div id="view2D-box">
      <div id="view2D"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SplitScreenDisplay",
  data() {
    return {
      view2D: "",
      view3D: "",
    };
  },
  mounted() {
    this.init2D();
  },
  methods: {
    init2D() {
      this.view2D = new Cesium.Viewer("view2D", {
        sceneMode: Cesium.SceneMode.SCENE2D,
      });
      // 加载OSM在线地图（黑色风格）
      this.view2D.imageryLayers.addImageryProvider(
        // UrlTemplateImageryProvider通过使用指定的 URL 模板请求图块来提供图像。
        new Cesium.UrlTemplateImageryProvider({
          url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
          subdomains: ["a", "b", "c", "d"],
        })
      );
    },
    init3D(viewer) {
      this.view3D = viewer;
      this.view3D.camera.percentageChanged = 0.01;
      // 监听三维地图变化
      this.view3D.camera.changed.addEventListener(this.sync2D);
    },
    // 将二维地图的视图与三维同步
    sync2D() {
      // 获取三维地图中心点
      let center = new Cesium.Cartesian2(
        Math.floor(this.view3D.canvas.clientWidth / 2),
        Math.floor(this.view3D.canvas.clientHeight / 2)
      );
      //   转为世界坐标系
      let position = this.view3D.scene.camera.pickEllipsoid(center);
      // 判断中心点是否在椭球体上
      if (Cesium.defined(position)) {
        // 获取三维地图中心点与相机之间的距离
        let distance = Cesium.Cartesian3.distance(
          position,
          this.view3D.scene.camera.positionWC
        );

        // 更新二维地图
        this.view2D.scene.camera.lookAt(
          position,
          new Cesium.Cartesian3(0.0, 0.0, distance)
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#container {
  display: flex;
  width: 100%;
  height: 100%;
}

#view3D-box,
#view2D-box {
  display: inline-block;
  width: 50%;
}

#view2D {
  width: 100%;
  height: 100vh;
}
</style>
